<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>欢迎页</title>
    <link rel="stylesheet" href="../frame/layui/css/layui.css">
    <link rel="stylesheet" href="../frame/static/css/style.css">
    <link rel="icon" href="../frame/static/image/code.png">
    <style>
    .bq-list{
        max-height: 197px;
    overflow: auto;
    border: 1px solid #CCC;
    }
    .blog-content{
    	margin-top: 25px;
    max-height: 530px;
    overflow: auto;
    }
    .li-block{
    width: 85%;
    border: 1px solid #CCC;
    height: 100px;
    //background: #CCC;
    margin:auto;
    //margin-top: 5px;
    //padding:10px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 5px;
    -webkit-box-shadow: 0 0 5px rgba(202,203,203,0.5);
    -moz-box-shadow: 0 0 5px rgba(202,203,204,0.5);
    cursor:pointer;
    }
    .title{
    line-height:62px;
    font-size: 35px;
    }
    .content-info{
        font-size: 20px;
    color: #BBB;
    }
    #demo20{
    text-align:center;
    padding-bottom:35px;
    }
    .li-child{
        background: #fff;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
    border-radius: initial;
    height: 100px;
    padding-left: 20px;
    }
    </style>
</head>
<body class="body">

<div class="layui-row layui-col-space10 my-index-main bq-list">
    <div class="layui-col-xs4 layui-col-sm2 layui-col-md2">
        <div class="my-nav-btn layui-clear" data-href="./demo/btn.html">
            <div class="layui-col-md5">
                <button class="layui-btn layui-btn-big layui-btn-danger layui-icon">&#xe705;</button>
            </div>
            <div class="layui-col-md7 tc">
                <p class="my-nav-text">40</p>
                <p class="my-nav-text layui-elip">java基础</p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs4 layui-col-sm2 layui-col-md2">
        <div class="my-nav-btn layui-clear" data-href="./demo/form.html">
            <div class="layui-col-md5">
                <button class="layui-btn layui-btn-big layui-btn-warm layui-icon">&#xe705;</button>
            </div>
            <div class="layui-col-md7 tc">
                <p class="my-nav-text">40</p>
                <p class="my-nav-text layui-elip">spring框架</p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs4 layui-col-sm2 layui-col-md2">
        <div class="my-nav-btn layui-clear" data-href="./demo/table.html">
            <div class="layui-col-md5">
                <button class="layui-btn layui-btn-big layui-icon">&#xe705;</button>
            </div>
            <div class="layui-col-md7 tc">
                <p class="my-nav-text">40</p>
                <p class="my-nav-text layui-elip">springboot学习</p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs4 layui-col-sm2 layui-col-md2">
        <div class="my-nav-btn layui-clear" data-href="./demo/tab-card.html">
            <div class="layui-col-md5">
                <button class="layui-btn layui-btn-big layui-btn-normal layui-icon">&#xe705;</button>
            </div>
            <div class="layui-col-md7 tc">
                <p class="my-nav-text">40</p>
                <p class="my-nav-text layui-elip">springcloud学习</p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs4 layui-col-sm2 layui-col-md2">
        <div class="my-nav-btn layui-clear" data-href="./demo/progress-bar.html">
            <div class="layui-col-md5">
                <button class="layui-btn layui-btn-big layui-bg-cyan layui-icon">&#xe705;</button>
            </div>
            <div class="layui-col-md7 tc">
                <p class="my-nav-text">40</p>
                <p class="my-nav-text layui-elip">maven知识</p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs4 layui-col-sm2 layui-col-md2">
        <div class="my-nav-btn layui-clear" data-href="./demo/folding-panel.html">
            <div class="layui-col-md5">
                <button class="layui-btn layui-btn-big layui-bg-black layui-icon">&#xe705;</button>
            </div>
            <div class="layui-col-md7 tc">
                <p class="my-nav-text">40</p>
                <p class="my-nav-text layui-elip">其他</p>
            </div>
        </div>
    </div>
</div>
<div class="blog-content">
	    <div class="li-block">
	    <div class="li-child">
	    <p class="title">SpringBoot基础知识</p>
	    <p class="content-info">胜多负少水电费水电费水电费水电费水电费水电费水电费水电费水电费.....</p>
	    </div>
	    </div>
</div>
<div id="demo20"></div>
<script type="text/javascript" src="../frame/layui/layui.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
     layui.use(['element', 'form', 'table', 'layer','laypage'], function () {
        var form = layui.form
                , table = layui.table
                , layer = layui.layer
                , element = layui.element
                , laypage = layui.laypage
                , $ = layui.jquery;
		      //-------加载新闻列表
		        $.post('/getAll', { page: 1, limit: 5}, function (result) {
		        	result =JSON.parse(result);
		        	var res = result.data; 
		                setHtml(res);
		                pages(result.count)//切换分类时候，调用页码，重新渲染
		        });
		//--------------------------------分页组件渲染
		        function pages(count) {
		            laypage.render({
		                elem: 'demo20'
		                , count: count
		                , theme: '#4A90E2'
		                , layout: ['prev', 'page', 'next']
		                , limit: 5
		                , jump: function (obj, first) {
		                    if (!first) {
		                        $.post('/getAll', { page: obj.curr, limit: obj.limit }, 
		                        function (result) {
		                        	    debugger;
		                            　　　　					var res = JSON.parse(result).data; 
		                            　　　　					setHtml(res);
		                       　				　 });
		                    }
		                }
		            });
		        }
		//--------------------------------写入后台内容  
		        function setHtml(data) {
		            var strHtml = "";
		            $.each(data, function (index, item) {
		                strHtml += ("<div class='li-block' id='"+item.id+"' onclick='openShowmark(this)'><div class='li-child'><p class='title'>"+item.title+"</p>"+
		                "<p class='content-info'>"+GetChinese(item.htmlcontent)+"</p></div></div>");
		            });
		            $(".blog-content").html(strHtml);
		        }
		        
    }); 
     function myTrim(x) {
    	    return x.replace(/^\s+|\s+$/gm,'');
    	}
     function GetChinese(strValue) {  
    	     if(strValue!= null && strValue!= ""){  
    	         var reg = /[\u4e00-\u9fa5]/g;   
    	        if(strValue.match(reg)!=null){
    	 		var str = strValue.match(reg).join("");  
    	 		str = str.substring(0,15)+"......"
    	         return str;
    	        }else{
    	        	return "";
    	        }
    	     }  
    	     else  
    	         return "";  
    	 }   
     function openShowmark(type){
    	var id = $(type).attr("id");
    	 window.open("/test1/"+id, "_blank");
     }
</script>
</body>
</html>